<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import { onMounted } from "vue";
//引入语言包插件
import MapboxLanguage  from '@mapbox/mapbox-gl-language'

//设置token
mapboxgl.accessToken =
  "xxxxx";

onMounted(() => {
  const map = new mapboxgl.Map({
    //指定用来装载地图的DOM容器的id
    container: "map",
    ////街道地图
    //style: "mapbox://styles/mapbox/streets-v12",
    // //户外地图
    // style: "mapbox://styles/mapbox/outdoors-v12",
    // //灰白色地图
    // style: "mapbox://styles/mapbox/light-v11",
    // //暗黑色地图
    // style: "mapbox://styles/mapbox/dark-v11",
    // //卫星地图，无注记
    // style: "mapbox://styles/mapbox/satellite-v9",
    // //卫星地图，有注记
    // style: "mapbox://styles/mapbox/satellite-streets-v12",
    // //导航地图，白天
    // style: "mapbox://styles/mapbox/navigation-day-v1",
    //导航地图，夜晚
    style: "mapbox://styles/mapbox/navigation-night-v1",
   
    //指定默认视图中心点的经纬度
    center: [106.55, 29.57],
    //指定默认视图的放大层级
    zoom: 9,
  });

  //将当前Mapbox底图的语言设置为中文简体
  const language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
  map.addControl(language);
});
</script>

<template>
  <div id="map" class="map"></div>
</template>

<style>
.map {
  flex: 1;
}
</style>
